<template>
  <!--有奖答题头部-->
  <view class="head flex flex-row fs_0">
    <image :src="detail.coverUrl" class="fs_0" />
    <view class="info flex flex-column f_1 between">
      <view class="title line-1">{{ detail.practiceName }}</view>
      <view class="statistics flex flex-row between" v-if="type === 'view'">
        <view class="item flex flex-column">
          <text>{{ detail.studentNum ? detail.studentNum : 0 }}</text>
          <label>答题人数</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.avgScore ? detail.avgScore : 0 }}</text>
          <label>平均分</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ averageDuration }}</text>
          <label>平均用时</label>
        </view>
      </view>
      <!--统计头部-->
      <view class="statistics flex flex-row between" v-if="type === 'settings'">
        <view class="item flex flex-column">
          <text>{{ detail.itemNum ? detail.itemNum : 0 }}</text>
          <label>题量</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.scoreTotal ? detail.scoreTotal : 0 }}</text>
          <label>总分</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.time ? detail.time : 0 }}</text>
          <label>时长（分钟）</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.studentNum ? detail.studentNum : 0 }}</text>
          <label>练习人数</label>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatTime } from '@/utils/PrjUtils'; 
export default {
  name: "AwardHead",
  props: {
    detail: Object,
    type: {
      default: "view", // view：练习详情 settings:练习设置页
      type: String
    }
  },
  computed: {
    averageDuration() {
      return !this.detail.avgTime || this.detail.avgTime <= 0 ? '00:00:00' : formatTime(this.detail.num)
    },
  },
}
</script>
<style scoped lang="scss">
.head {
  padding: 13px 19px 28px 19px;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  background-color: #FFFFFF;

  image {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background-size: cover;
  }

  .info {
    margin-left: 23px;

    .title {
      font-size: 32rpx;
      color: #333333;
    }
  }

  .statistics {
    margin-top: 14px;

    .item {
      &+.item {
        // margin-left: 30px;
      }

      text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
      }

      label {
        font-size: 24rpx;
        color: #666666;
        margin-top: 8px;
      }
    }
  }
}
</style>